/** @format */

import { Pagination } from "antd";

const GoodsPanel = () => {
  const goods = [
    { id: 1, name: "可乐", price: 3, icon: "🥤" },
    { id: 2, name: "薯片", price: 6, icon: "🍪" },
    { id: 3, name: "面包", price: 5, icon: "👨‍🍳" },
    { id: 4, name: "牛奶", price: 8, icon: "🥛" },
    { id: 5, name: "巧克力", price: 12, icon: "🍫" },
    { id: 6, name: "冰淇淋", price: 6, icon: "🍦" },
    { id: 7, name: "热狗", price: 8, icon: "🌭" },
    { id: 8, name: "披萨", price: 38, icon: "🍕" },
    { id: 9, name: "汉堡", price: 15, icon: "🍔" },
    { id: 10, name: "咖啡", price: 18, icon: "☕" },
    { id: 11, name: "果汁", price: 10, icon: "🧃" },
    { id: 12, name: "三明治", price: 12, icon: "🥪" },
  ];

  return (
    <>
      <div className="grid grid-cols-3 gap-4 p-4 md:grid-cols-4 lg:grid-cols-6">
        {goods.map((item) => (
          <div
            key={item.id}
            className="flex flex-col items-center justify-center p-4 transition-shadow bg-white rounded-lg shadow-md cursor-pointer hover:shadow-lg">
            <span className="mb-2 text-3xl">{item.icon}</span>
            <span className="font-medium text-gray-800">{item.name}</span>
            <span className="text-blue-600">¥{item.price}</span>
          </div>
        ))}
      </div>
      <Pagination align="end" defaultCurrent={1} total={50} />
    </>
  );
};

export default GoodsPanel;
